<script setup lang="ts">
import Camera from "simple-vue-camera";
import {CameraOutlined, CheckOutlined, CloseOutlined, FolderOpenOutlined, ReloadOutlined} from "@ant-design/icons-vue";
import {Form} from "ant-design-vue";
import {computed} from "vue";
const formItemContext = Form.useInjectFormItemContext()
const props = defineProps<{
  value: Blob| File| String |null
}>()
const model = defineModel()
const camera = ref()
const camera_list = ref([])
const emits = defineEmits(['update:value'])
const onStarted = async ()=>{
  camera_list.value = await camera.value.devices(['videoinput'])
}
const photo_url = ref()

let blob = null

const snapshot = async() =>{
  blob = await camera.value?.snapshot({ width: 1920, height: 1080}, "image/png", 0.5)
  photo_url.value = URL.createObjectURL(blob)
  model.value = blob
  emits('update:value', model.value)
}
const capture = ref(false)
const file_selector = ref()

const on_file_selected = (e:any)=>{
  if(e.target.files.length > 0){
    model.value = e.target.files[0]
    emits('update:value', model.value)
  }
}

const on_clear_vmodel = ()=>{
  capture.value = false
  photo_url.value = null
  file_selector.value.value = ''
  emits('update:value', null)
}

const valuePropsUpdated = () =>{
  if(props.value instanceof Blob)
  {
    photo_url.value = URL.createObjectURL(props.value)
  }else if(props.value instanceof File){
    let reader = new FileReader()
    reader.onload = (file)=>{
      photo_url.value = file?.target?.result
    }
    reader.readAsDataURL(props.value)
  }else if(typeof(props.value) === 'string'){
    photo_url.value = import.meta.env.VITE_BACKEND_BASE + props.value
  } else{
    photo_url.value = props.value
  }
}
watch(()=> props.value, ()=>{
  valuePropsUpdated()
})

valuePropsUpdated()

</script>

<template>
  <ClientOnly>
    <div class="flex pb-2">
      <a-input class="rounded-br-none rounded-tr-none border-r-0" :readonly="true" v-model:value="photo_url"></a-input>
      <a-button-group class="h-full">
        <a-button @click="capture = true, photo_url = null" :icon="h(CameraOutlined)" class="pt-0 rounded-l-[0]"></a-button>
        <a-button  :icon="h(FolderOpenOutlined)" class="pt-0" @click="file_selector.click()" ></a-button>
      </a-button-group>
      <input ref="file_selector" type="file" accept="image/*" style="display: none;" @change="on_file_selected"/>
    </div>
    <div v-if="capture && !photo_url" class="aspect-video">
      <Camera ref="camera" @started="onStarted">
        <div class="w-full h-full flex flex-col items-center pb-3">
          <div class="flex-1"></div>
          <a-button-group>
            <a-button @click="snapshot()" type="primary" class="pt-0" :icon="h(CameraOutlined)"/>
          </a-button-group>
        </div>
      </Camera>
    </div>
    <div v-if="photo_url" class="w-full h-full relative min-h-[50px]">
      <img alt="pic" :src="photo_url" class="w-full h-full"/>
      <div class="absolute top-0 left-0 w-full h-full flex flex-col items-center pb-3">
        <div class="flex-1"></div>
        <a-button-group v-if="capture">
          <a-button type="primary" class="pt-0" @click="()=> {model = null, photo_url = null}" :icon="h(ReloadOutlined)"/>
          <a-button type="primary" class="pt-0" @click="model = blob,capture = false" :icon="h(CheckOutlined)"/>
        </a-button-group>
      </div>
      <a-button class="pt-0 top-3 absolute right-3" @click="on_clear_vmodel" v-if="!capture && photo_url" :icon="h(CloseOutlined)"></a-button>
    </div>
  </ClientOnly>
</template>

<style scoped>
:deep(.ant-input-group-addon){
  padding: 0;
}
</style>